<template>
  <div class="home">
    <div class="homeHeader">
      <div class="headerBlock">
        <Header></Header>
      </div>
    </div>
    <div class="homeContent">
    <router-view></router-view>
    </div>
    <div class="homeFooter">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Header from "~/components/header/header";
import Footer from "~/components/footer/footer";

export default {
  name: "home",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1"
    };
  },
  components: {
    Header,
    Footer
  },
  mounted() {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroy() {},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>

<style scoped lang="less">
body,html{
  overflow: hidden;
}
.home {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  .homeHeader {
    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
    .headerBlock {
      width: 60%;
    }
  }
  .homeContent{
    min-height: 70vh;
  }
  .homeFooter {
    background: white;
    width: 100%;
  }
}
</style>
